<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 12px;">
                    <el-form-item label="权限名称">
                        <el-input v-model="formInline.RoleName" placeholder="请输入权限名称" clearable />
                    </el-form-item>

                    <el-form-item>
                        <template v-slot="scope">
                            <el-button type="primary" @click="getUser()">查询</el-button>
                            <el-button type="success" @click="addInfo">添加</el-button>
                        </template>

                    </el-form-item>
                </el-form>
            </el-header> &nbsp;
            <el-main>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="userId" label="角色编号" width="85" align="center" />
                    <el-table-column prop="userName" label="用户名" align="center" />
                    <el-table-column prop="userPwd" label="密码" align="center">
                        <template v-slot="scope">
                            ******
                        </template>
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色" align="center" />
                    <el-table-column prop="state" label="状态" align="center">
                        <template v-slot="scope">
                            {{ scope.row.state == 1 ? '启用' : '禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="70" align="center" />
                    <el-table-column prop="creaTime" label="创建时间" align="center">
                        <template v-slot="scope">
                            {{ moment(scope.row.creaTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="primary" @click="handleEdit(scope.row.userId)">编辑</el-button>
                            <el-button type="danger" @click="Del(scope.row.userId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[1, 3, 6]" :background="true" layout="total, sizes, prev, pager, next, jumper,slot"
                    prev-text="上一页" next-text="下一页" :total="page.totalCount" />
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { postinfo } from '@/Http/axiosInfo'
import { xieInfo } from '@/Http/axiosInfo'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import moment from 'moment'

const router = useRouter()
const formInline = reactive({
    RoleName: '',

})

const tableData = ref([])

const page = reactive({
    pageIndex: 1,
    pageSize: 3,
    pageCount: 0,
    totalCount: 0
})

const getUser = async () => {
    postinfo.get('/MangUser/GetUserList', {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            RoleName: formInline.RoleName
        }
    })
        .then(res => {
            tableData.value = res.data.data.pageData
            page.pageCount = res.data.data.pageCount
            page.totalCount = res.data.data.totalCount
        })
        .catch(err => {
            console.log(err)
    })
}

//删除用户
const Del = (UserId: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            xieInfo.delete('/ManUser/DelUser?UserId=' + UserId)
                .then(res => {
                    if (res.data.code == 500) {
                        ElMessage.success('删除成功');
                        getUser()
                    }
                    else {
                        ElMessage.error(res.data.msg);
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

//跳转添加页面
const addInfo = () => {
    router.push({ path: '/AddUser' })
}

// 跳转到编辑页面
const handleEdit = (UserId:any) => {
    router.push({
        name: 'UpdateUser',
        query: {
            UserId: UserId
        }
    })
}


watch(page, () => {
    getUser()
})

onMounted(() => {
    getUser()
})
</script>